<template></template>

<script setup lang="ts">
import * as L from 'leaflet'
import lcPoint from './components/point.vue'
import { fireInsuranceStore } from '@/pages/forestry/store/store'
import apiList from '@/pages/forestry/api/api'
const fireStore = fireInsuranceStore()
const moduleVisible = computed(() => fireStore.moduleVisible)
const point = ref([])
let timeId = ref()
const initData = async () => {
  const res = await apiList.getForestFarm()
  point.value = res.data
  handleInitMap()
}
const baseMap = inject('baseMap')
const layer = L.layerGroup().addTo(toRaw(baseMap.value))
const handleInitMap = () => {
  point.value.forEach(item => {
    if (item.farmCoordinatesArray) {
      const markerContainer = document.createDocumentFragment()
      const pointDom = createApp(lcPoint, {
        item
      }).mount(markerContainer)
      const marker = L.marker(
        [item.farmCoordinatesArray[1], item.farmCoordinatesArray[0]],
        {
          icon: L.divIcon({
            html: pointDom.$el
          })
        }
      )
      layer.addLayer(marker)
    }
  })
}
watch(
  () => moduleVisible.skModule,
  newV => {
    if (newV) {
      initData()
      timeId.value = setInterval(() => {
        initData()
      }, 15 * 60 * 1000)
    } else {
      clearInterval(timeId.value)
      timeId.value = null
    }
  },
  { immediate: true, deep: true }
)
onMounted(() => {
  initData()
})

onUnmounted(() => {
  toRaw(baseMap.value).removeLayer(layer)
  clearInterval(timeId.value)
  timeId.value = null
})
</script>

<style lang="scss"></style>
